<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('板块统计')" />
</head>
<body class="gray-bg">
<div class="container-div">
	<div class="row">

		<div class="btn-group-sm" id="toolbar" role="group" style="margin-top: 5px">
			<a class="btn btn-success" onclick="add()" >
				<i class="fa fa-plus"></i> 新增
			</a>
			<a class="btn btn-info" id="expandAllBtn">
				<i class="fa fa-circle-o"></i> 重新板块计算
			</a>
		</div>
		<div class="col-sm-12 select-table table-striped">
			<table class="table table-hover no-margins" >
				<thead>
				<tr>
					<th>大板块</th>
					<th>小板块</th>
					<th>操作</th>
				</tr>
				</thead>
				<tbody id="hot-concept-body">

				</tbody>
			</table>
		</div>
	</div>
	<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="addModalLabel">New message</h4>
				</div>
				<div class="modal-body">
					<form>
						<div class="form-group">
							<label for="recipient-name" class="control-label">概念:</label>
							<input type="text" class="form-control" id="recipient-name">
							<input type="text" class="form-control" id="recipient-index" th:type="hidden" >
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" id="addConceptBtn">确定</button>
				</div>
			</div>
		</div>
	</div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
	var hotConceptTree = [[${hotConceptTree}]];
	hotConceptTree = JSON.parse(hotConceptTree)
	initTable()
	function initTable(){
		$("#hot-concept-body").empty();
		for(i in hotConceptTree){

			appendHotConceptBody(hotConceptTree[i],i)
		}
	}

	function appendHotConceptBody(hotConcept,i){
		var myName = Object.keys(hotConcept)[0];
		var needAppend = "<tr><td><span class=\"label label-warning\">"+myName+"</span></td><td>";
		$.each(hotConcept[myName], function(j,val){
			needAppend=needAppend+" <span class=\"label label-primary\">"+val+" <i class=\"fa fa-close\" onclick='removeOne("+i+","+j+")'></i></span> ";
		});
		needAppend = needAppend +"</td><td><a class=\"btn btn-info btn-xs \" href=\"javascript:void(0)\" onclick=\"addOne("+i+")\"><i class=\"fa fa-plus\"></i>新增</a> <a class=\"btn btn-danger btn-xs \" href=\"javascript:void(0)\" onclick=\"remove("+i+")\"><i class=\"fa fa-trash\"></i>删除</a></td></tr>";
		$("#hot-concept-body").append(needAppend)

	}
	function addOne(index) {
		$('#addModal').find('.modal-title').text('为大概念 ' + Object.keys(hotConceptTree[index])[0] +"新增小概念：");
		$("#recipient-index").val(index)
		$('#addModal').modal('show');
	}
	function add() {
		$('#addModal').find('.modal-title').text("新增大概念：");
		$("#recipient-index").val('-1')
		$('#addModal').modal('show');
	}
	function remove(index) {
		$.modal.confirm("确认删除 "+Object.keys(hotConceptTree[index])[0]+" 大概念?", function() {
			hotConceptTree.splice(index, 1);
			$.operate.post(ctx + "bk/hotConceptTree/edit", {"hotConceptTree":JSON.stringify(hotConceptTree)},function(data){
				initTable();
			});
		});
	}
	function removeOne(i,j) {
		var key = Object.keys(hotConceptTree[i])[0]
		$.modal.confirm("确认删除 "+hotConceptTree[i][key][j]+" 概念?", function() {
			hotConceptTree[i][key].splice(j, 1);
			$.operate.post(ctx + "bk/hotConceptTree/edit", {"hotConceptTree":JSON.stringify(hotConceptTree)},function(data){
				initTable();
			});
		});
	}
	$("#addConceptBtn").click(function () {
		var index = $("#recipient-index").val();
		var concept = $("#recipient-name").val();
		index = parseInt(index);
		if(index<0){
			hotConceptTree.push({[concept]:[]})
		}else{
			var key =Object.keys(hotConceptTree[index])[0];
			hotConceptTree[index][key].push(concept);
		}
		$('#addModal').modal('hide');
		$.operate.post(ctx + "bk/hotConceptTree/edit", {"hotConceptTree":JSON.stringify(hotConceptTree)},function(data){
			initTable();
		});

	})
</script>
</body>
</html>